<template>
	<view class="wrapper">
		<!-- 收货信息 -->
		<template v-if="carts.length">
		<view class="shipment">
			<template v-if="address">
			<view class="dt">收货人:</view>
			<view class="dd meta">
				<text class="name">{{address.userName}}</text>
				<text class="phone">{{address.telNumber}}</text>
			</view>
			<view class="dt">收货地址:</view>
			<view class="dd">{{address.provinceName+address.cityName+address.countyName+address.detailInfo}}</view>
			</template>
			<button type="primary" v-else @click="addAddress">点击添加地址</button>
		</view>
		<!-- 购物车 -->
		<view class="carts">
			<view class="item">
				<view class="shopname">优购生活馆</view>
				<view class="goods" v-for="(item,index) in carts" :key="item.goods_id">
					<image class="pic" :src="item.goods_small_logo"></image>

					<view class="meta">
						<view class="name">{{ item.goods_name }}</view>
						<view class="price">
							<text>￥</text>
							{{ item.goods_price*item.goods_count }}
							<text>.00</text>
						</view>

						<view class="amount">
							<text class="reduce" @click="decreaseCount(index)">-</text>
							<input type="number" :value="item.goods_count" class="number"></input>
							<text class="plus" @click="increaseCount(index)">+</text>
						</view>
					</view>

					<view class="checkbox"  @click="toggleState(index)"><icon type="success" size="20" :color="item.goods_state ? '#ea4451' : '#ccc'"></icon></view>
				</view>
			</view>
		</view>
		<!-- 其它 -->
		<view class="extra">
			<label class="checkall" @click="toggleAll">
				<icon type="success" :color="allChecked?'#ea4451':'#ccc'" size="20"></icon>
				全选
			</label>
			<view class="total">
				合计:
				<text>￥</text>
				<label>{{ sumCount }}</label>
				<text>.00</text>
			</view>
			<view class="pay">结算{{ checkedCount }}</view>
		</view>
		</template>
		<template v-else>
			<view class="tips">空空如也~~</view>
			<button type="primary" style="width: 300rpx;" @click="buyGoods">去买点啥把</button>
		</template>
	</view>
</template>

<script>
import { mapState,mapGetters } from 'vuex';
export default {
	computed: {
		...mapState('carts', ['carts']),
		...mapState('user', ['address']),
		...mapGetters('carts',['allChecked','checkedCount','sumCount'])
	},
	methods:{
		//添加点击事件，切换状态，选中就是红颜色，没有就是灰色
		//在模块定义切换事件，把id带过去
		toggleState(index){
			 this.$store.commit('carts/toggleState', index);
		},
		toggleAll(){
			this.$store.commit('carts/toggleAll', this.allChecked);
		},
		//根据id控制自身商品数量的加减。
		decreaseCount(index){
			this.$store.commit('carts/decreaseCount', index)
		},
		increaseCount(index){
			this.$store.commit('carts/increaseCount', index)
		},
		buyGoods(){
			uni.switchTab({
				url:'../category/index'
			})
		},
		//获取收货地址
		async addAddress(){
		const [err,{errMsg,...address}]	= await uni.chooseAddress()
		this.$store.commit('user/addAddress',address)
		}
	}
};
</script>

<style scoped lang="scss">
.shipment {
	height: 100rpx;
	line-height: 2;
	padding: 30rpx 30rpx 40rpx 30rpx;
	font-size: 27rpx;
	color: #333;
	background-color: #fff;
	background-image: url(http://static.botue.com/ugo/images/cart_border%402x.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom;

	.dt {
		width: 140rpx;
		float: left;
		clear: both;
	}

	.dd {
		padding-left: 160rpx;
	}

	.meta {
		padding-right: 50rpx;
	}

	text.phone {
		float: right;
	}
}

.carts {
	background-color: #f4f4f4;
	padding-bottom: 110rpx;
	overflow: hidden;

	.shopname {
		padding: 30rpx;
		margin-top: 20rpx;
		font-size: 30rpx;
		color: #333;
		background-color: #fff;
		border-top: 1rpx solid #eee;
		border-bottom: 1rpx solid #eee;
	}

	.goods {
		display: flex;
		padding: 30rpx 20rpx 30rpx 0;
		margin-left: 105rpx;
		border-bottom: 1rpx solid #eee;
		background-color: #fff;

		position: relative;

		.checkbox {
			width: 101rpx;
			height: 100%;
			background-color: #fff;

			display: flex;
			justify-content: center;
			align-items: center;

			position: absolute;
			left: -100rpx;
			top: 0;
		}

		&:last-child {
			border-bottom: none;
		}

		.pic {
			width: 200rpx;
			height: 200rpx;
			margin-right: 30rpx;
		}

		.meta {
			flex: 1;
			font-size: 27rpx;
			color: #333;
			position: relative;
		}

		.name {
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.price {
			position: absolute;
			bottom: 0;

			color: #ea4451;
			font-size: 33rpx;

			text {
				font-size: 22rpx;
			}
		}

		.amount {
			position: absolute;
			bottom: 0;
			right: 20rpx;

			height: 48rpx;
			text-align: center;
			border: 1rpx solid #ddd;
			border-radius: 8rpx;

			display: flex;
			align-items: center;

			text {
				display: block;
				width: 60rpx;
				line-height: 48rpx;
				font-size: 36rpx;
				color: #ddd;
				text-align: center;
			}

			input {
				width: 60rpx;
				height: 48rpx;
				min-height: 48rpx;
				font-size: 27rpx;
				border-left: 1rpx solid #ddd;
				border-right: 1rpx solid #ddd;
			}
		}
	}
}

.extra {
	position: fixed;
	bottom: 0;
	/* #ifdef H5 */
	bottom: 50px;
	/* #endif */
	left: 0;
	z-index: 9;

	width: 750rpx;
	height: 96rpx;
	text-align: center;
	line-height: 96rpx;
	font-size: 36rpx;
	border-top: 1rpx solid #eee;
	background-color: #fff;
	color: #333;
	display: flex;

	.checkall {
		width: 140rpx;
		line-height: 1;
		margin-left: 25rpx;
		display: flex;
		align-items: center;

		icon {
			margin-right: 20rpx;
		}
	}

	.total {
		display: flex;
		justify-content: center;
		flex: 1;

		label,
		text {
			color: #ea4451;
			vertical-align: bottom;
			position: relative;
			bottom: -2rpx;
		}

		text {
			position: relative;
			bottom: -3rpx;
			font-size: 24rpx;

			&:first-child {
				margin-left: 10rpx;
			}
		}
	}

	.pay {
		width: 200rpx;
		background-color: #ea4451;
		color: #fff;
	}
}
</style>
